import SyntaxHighlighter from '@/components/SyntaxHighlighter'
import { useEffect } from 'react';

const data = [
  1,
  2,
  3,
  4,
  5,
  56,
  6,
  43
]

const code1 = `
  [
    1,
    2,
    3,
    4,
    5,
    56,
    6,
    43
]
`

const code2 = `
  const sortFn = () => {
    // 第一种方法
    for (let i = 0; i < data.length; i++) {
      for (let j = 0; j < data.length; j++) {
        if (data[j] > data[j + 1]) {
          [data[j], data[j + 1]] = [data[j + 1], data[j]]
        }
      }
    }

    // 第二种方法
    // data.sort((a, b) => a - b)
  
    console.log('data', data)
  }
`

function BubbleSort() {

  const sortFn = () => {
    // 第一种方法
    for (let i = 0; i < data.length; i++) {
      for (let j = 0; j < data.length; j++) {
        if (data[j] > data[j + 1]) {
          [data[j], data[j + 1]] = [data[j + 1], data[j]]
        }
      }
    }

    // 第二种方法
    // data.sort((a, b) => a - b)
  
    console.log('data', data)
  }

  useEffect(() => {
    sortFn()
  }, [])

  return (
    <div>
      <p>将下列数据冒泡排序（从小到大）</p>
      <SyntaxHighlighter children={code1} />
      <p>代码逻辑如下：</p>
      <SyntaxHighlighter children={code2} />
    </div>
  )
}

export default BubbleSort